<template>
  <div
    class="flex bg-cover bg-center bg-no-repeat w-screen h-screen pt-[60px] pr-[100px] pb-[40px] pl-[60px]"
    :style="{ 'background-image': `url(${bg})` }"
  >
    <header class="flex-none flex mr-10">
      <img
        src="@/assets/wide/title.png"
        class="flex-[0_0_28px] mr-[35px] h-[621px] mt-5"
        alt=""
      />
      <img
        src="@/assets/wide/header-sp.png"
        class="w-1 h-[722px] mt-4"
        alt=""
      />
    </header>
    <div class="flex flex-1" :class="contentClass">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import bg from "@/assets/wide/search-bg.jpg";

export default {
  props: {
    contentClass: {},
  },
  data() {
    return {
      bg,
    };
  },
};
</script>
